<template>
	<view>
		<view>
			<view class="p-2 d-flex a-center bg-white">
				<view class="font-md text-secondary mr-1 flex-shrink">
					收货人：</view>
				<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.name" />
			</view>
			<view class="p-2 d-flex a-center bg-white">
				<view class="font-md text-secondary mr-1 flex-shrink">
					手机号码：</view>
				<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.phone" />
			</view>
			<view class="p-2 d-flex a-center bg-white">
				<view class="font-md text-secondary mr-1 flex-shrink">
					邮箱：</view>
				<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.email" />
			</view>
			<view class="p-2 d-flex a-center bg-white span-20">
				<view class="font-md mr-1  text-secondary picker-width input-city d-flex">
					<view>所在地区：</view>
					<input placeholder="请选择省市区" disabled type="text" v-model="ruleForm.path" class="flex-1"
						@click="openPicker" />
					<!-- 省市区选择 province city area初始省市区设置 show:是否显示  @changeClick：更改省市区事件 @sureSelectArea：确认事件 @hideShow：隐藏事件-->
					<cc-selectDity :province="ruleForm.province" :city="ruleForm.city" :area="ruleForm.district"
						:show="show" @changeClick="changeClick" @sureSelectArea="onsetCity"
						@hideShow="onhideShow"></cc-selectDity>
				</view>
			</view>
			<view class="p-2 d-flex a-center bg-white">
				<view class="font-md text-secondary mr-1 flex-shrink">
					详细地址：</view>
				<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.address" />
			</view>
			<view class="p-2 d-flex a-center bg-white">
				<view class="font-md text-secondary mr-1 flex-shrink">
					设为默认地址：</view>
				<switch class="ml-auto" color="#FD6801" :checked="ruleForm.default" @change="changeSwitch" />
			</view>
			<view class="m-3">
				<button class="text-center w-100 main-bg-color text-white font-md rounded btn-height"
					hover-class="main-bg-hover-color" @click="submit" :class="{ disabledBtn: isSubmitting }">
					保 存
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useAddressStore
	} from '../../store/address.js'
	const store = useAddressStore()
	var ruleForm = ref({
		id: '',
		name: '',
		phone: '',
		email: '',
		province: '安徽省',
		city: '合肥市',
		district: '高新区',
		path: '',
		address: '',
		default: 0
	})
	var rules = {
		name: [{
			message: '请输入正确的账号，账号长度为2-10之间',
			rule: /^[\u4e00-\u9fa5]{2,10}$/
		}],
		phone: [{
			message: '请输入正确的手机号',
			rule: /^1[3-9]\d{9}$/

		}],
		email: [{
			message: '请输入正确的邮箱',
			rule: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
		}],
		path: [{
			message: '请输入正确的省市区',
			rule: /^[\u4e00-\u9fa5]+[a-zA-Z0-9]*$/
		}],
		address: [{
			message: '请输入正确的地址',
			rule: /^.{2,30}$/

		}]
	}
	var index = ref(0);
	const show = ref(false)
	const isShow = ref(true)
	var isEdit = ref(false)
	const isSubmitting = ref(false)
	const changeSwitch = () => {
		ruleForm.value.default = 1
	}
	onLoad((e) => {
		if (e.key) { //走的是编辑
			isEdit.value = true
			console.log('qqqqweeee', e);
			index.value = e.key
			ruleForm.value = Object.assign(ruleForm.value, store.List[index.value])
			ruleForm.value.path = ruleForm.value.province + ruleForm.value.city + ruleForm.value.district
		}
	})
	//表单验证
	const validate = (key) => {
		let check = true;
		rules[key].forEach(v => {
			var obj = ruleForm.value[key];
			if (!v.rule.test(obj)) {
				uni.showToast({
					title: v.message,
					icon: 'none'
				})
				check = false
				return;
			}
		})
		return check;
	}
	const submit = () => {
		if (isSubmitting.value) {
			return
		}
		isSubmitting.value = true;
		setTimeout(() => {
			isSubmitting.value = false;
		}, 1500);
		if (!validate('name')) {
			return;
		}
		if (!validate('phone')) {
			return;
		}
		if (!validate('email')) {
			return;
		}
		if (!validate('path')) {
			return;
		}
		if (!validate('address')) {
			return;
		}
		if (isEdit.value) {
			// 编辑
			store.editRuleForm({
				index: index.value,
				item: ruleForm.value
			})
			uni.navigateBack({
				delta: 1
			})
		} else {
			store.addRuleForm(ruleForm.value)
			uni.navigateBack({
				delta: 1
			})
		}
	}
	const openPicker = () => {
		console.log('执行打开地址选择器')
		show.value = true
	}
	const changeClick = (value, value2, value3, value4) => {
		console.log('地址选择器 = ' + value + value2 + value3 + value4);
		ruleForm.value.province = value;
		ruleForm.value.city = value2;
		ruleForm.value.district = value3;
		// ruleForm.value.areaCode = value4;
	}
	const onhideShow = () => {
		show.value = false
		console.log('执行了关闭地址选择器')
	}
	//选中省市区
	const onsetCity = (e) => {
		let data = e.detail.target.dataset;
		let address = data.province + data.city + data.area;
		show.value = false
		ruleForm.value.path = address
	}
</script>
<style scoped lang="scss">
	.btn-height {
		height: 88rpx;
		line-height: 88rpx;
	}

	.disabledBtn {
		pointer-events: none;
		opacity: 0.6;
	}
</style>